<template>
  <div class="app">
    <ui-layout>
      <ui-sub-layout
        :header="false"
        :sidebar-is-collapsed="false"
        @sidebar-selected="onSidebarSelected"
      >
        <template #logo_small>
          <img src="~@/assets/images/logo-small.svg" />
        </template>
        <template #logo>
          <img src="~@/assets/images/logo-white.svg" />
        </template>
        <template>
          <router-view></router-view>
        </template>
      </ui-sub-layout>
    </ui-layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      publicPath: process.env.VUE_APP_ROUTER_BASE
    }
  },

  mounted() {
    this.mainVuexMutation()
    this.mainVuexAction()
  },

  methods: {
    /**
     * 调用全局Action例子
     */
    mainVuexAction() {
      this.setSidebarConfig()
      this.setHeaderConfig()
    },
    /**
     * 调用全局Mutation例子
     */
    mainVuexMutation() {
      this.registerEvent()
    },
    /**
     * 点击侧栏子元素事件
     * @param e
     * @param next 完成自己的逻辑后必须执行，不然不会执行默认的router.push操作
     */
    onSidebarSelected(e, next) {
      const promise = new Promise((resolve, reject) => {
        this.$showLoading('等待500ms，然后执行next')
        setTimeout(() => {
          this.$hideLoading()
          resolve()
        }, 500)
      })

      promise.then(() => {
        next()
      })
    },
    setSidebarConfig() {
      this.$store.dispatch(this.$storeGlobalTypes.SET_SIDEBAR_CONFIG, [
        {
          name: 'spa-1',
          iconClassName: 'mail',
          path: 'dashboard'
        },
        {
          name: 'spa-2',
          iconClassName: 'calendar',
          path: 'about'
        },
        {
          name: 'spa-3',
          iconClassName: 'appstore',
          path: 'base',
          children: [
            {
              name: 'spa-3-sub-1',
              path: 'base/sub-1'
            },
            {
              name: 'spa-3-sub-2',
              path: 'base/sub-2'
            },
            {
              name: 'spa-3-sub-3',
              path: 'base/sub-3',
              children: [
                {
                  name: 'sub-3-1',
                  path: 'base/sub-3/sub-3-1'
                },
                {
                  name: 'sub-3-2',
                  path: 'base/sub-3/sub-3-2'
                },
                {
                  name: 'sub-3-3',
                  path: 'base/sub-3/sub-3-3'
                }
              ]
            }
          ]
        },
        {
          name: 'spa-4',
          iconClassName: 'setting',
          path: 'report',
          children: [
            {
              name: 'spa-4-sub-1',
              path: 'report/sub-1'
            },
            {
              name: 'spa-4-sub-2',
              path: 'report/sub-2'
            },
            {
              name: 'spa-4-sub-3',
              path: 'report/sub-3'
            }
          ]
        }
      ])
    },
    setHeaderConfig() {
      this.$store.dispatch(this.$storeGlobalTypes.SET_HEADER_MENU, {
        // 头部菜单
        entryList: [
          'index',
          'example',
          // 如果需要一个下拉菜单的入口
          [
            // 对应entry这个的key
            'manage',
            {
              name: '全局看板',
              url: '/manage/overview'
            },
            {
              name: '数据看板',
              url: '/manage/dataview'
            }
          ]
        ],
        // 菜单详情
        entry: {
          index: { name: '首页', url: '/' },
          example: { name: '另一个页面例子', url: '/example' },
          manage: { name: '控制台', url: '/manage' }
        }
      })
    },

    /**
     * store中的事件注册
     * 预留事件：
     *    handleLogin: 登录
     *    handleLogout: 登出
     */
    registerEvent() {
      const self = this
      // 注册事件
      this.$store.commit(`global/${this.$storeGlobalTypes.REGISTER_EVENT}`, {
        handleLogin: self.onHandleLogin,
        handleLogout: self.onHandleLogout
      })
    },
    /**
     * 用户登录示例
     */
    onHandleLogin() {
      // 用户登录示例
      return new Promise(resolve => {
        this.$showLoading('登录中，请稍后')
        setTimeout(() => {
          // 需要return对应的用户信息及menu
          const obj = {
            info: {
              name: '我是很长的用户名'
            },
            menu: [
              {
                name: '跳转到某个地址',
                url: 'https://www.qq.com/'
              }
            ]
          }
          this.$hideLoading()
          this.$message.success('登录成功')
          resolve(obj)
        }, 2000)
      })

      // 兼容之前主动调用action的模式
      // this.$store.dispatch(this.$storeGlobalTypes.SET_USER_INFO, {
      //   isLogin: true,
      //   info: {
      //     name: '我是很长的用户名'
      //   },
      //   menu: [
      //     {
      //       name: '跳转到某个地址',
      //       url: 'https://www.qq.com/'
      //     }
      //   ]
      // })
    },
    /**
     * 用户登出示例
     */
    onHandleLogout() {
      return new Promise(resolve => {
        this.$showLoading('我这里可能是一些登出前的操作')
        setTimeout(() => {
          this.$message.success('登出成功')
          this.$hideLoading()
          resolve()
        }, 2000)
      })
    }
  }
}
</script>

<style lang="scss">
body {
  // 这里$--background-color--main来自于'/src/assets/styles/common/_var.scss'
  background-color: $--background-color--main;
}

.nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    *.router-link-exact-active {
      color: #42b983;
    }
  }
}

.app {
  color: #2c3e50;
}
</style>
